<template>
	<view class="absolute use-coupon-container">
		<u-popup round="16rpx" mode="bottom" :show="visible" @close="closeHandle">
			<view class="coupon-list-wrap box relative flex column">
				<view class="popup-header w-100">
					<text>选择优惠券</text>
					<image @click="closeHandle" src="../../static/icon/close.png" class="close-icon"></image>
				</view>
				<view class="relative flex-1 box w-100 ">
					<view class="absolute inset">
						<scroll-view class="full box coupon-list" scroll-y>
							<u-radio-group placement="column" :value="activeValue" @change="onChange">
								<view class="coupon-item-wrap" v-for="(item,index) in list" :key="index">
									<view class="price-wrap">
										<view class="money-wrap">
											<text class="prefix">￥</text>
											<text class="money-value">{{ item.coupon }}</text>
										</view>
										<view class="coupon-desc">
											<text>满{{ item.full_deduction }}元可用</text>
										</view>
									</view>
									<view class="coupon-line">
										<view class="line-inner"></view>
									</view>
									<view class="coupon-info">
										<view class="coupon-name">
											<text>{{ item.title }}</text>
										</view>
										<view class="coupon-time">
											<text>到期时间：{{ item.end_time }}</text>
										</view>
									</view>
									<view class="radio-wrap">
										<u-radio :name="item.id" :disabled="total < item.full_deduction"
											active-color="#FC7655" />
									</view>
								</view>
							</u-radio-group>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		mounted() {
			console.log(this.list, 'list');
		},
		props: ['visible', 'list', 'total', 'activeValue'],
		methods: {
			onChange(ev) {
				this.$emit('change', ev)
				this.$toast({ title: '选择成功' })
				setTimeout(() => {
					this.closeHandle()
				}, 500)
			},
			closeHandle() {
				this.$emit('close', false)
			}
		},
		computed: {},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.use-coupon-container {

		.coupon-list-wrap {
			height: 1000rpx;
			border-radius: 16rpx 16rpx 0 0;
			padding: 32rpx 0;
			background-color: #F7F8FA;

			.coupon-list {
				padding: 0 32rpx;
				box-sizing: border-box;

				.coupon-item-wrap {
					padding: 28rpx 32rpx;
					box-sizing: border-box;
					position: relative;
					display: flex;
					align-items: center;
					background-color: #FFF;
					border-radius: 8rpx;
					overflow: hidden;
					margin-bottom: 24rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.coupon-line {
						position: absolute;
						left: 210rpx;
						top: 0;
						bottom: 0;
						width: 2rpx;
						box-sizing: border-box;
						padding: 16rpx 0;


						&::after,
						&::before {
							content: "";
							display: block;
							border-radius: 50%;
							overflow: hidden;
							width: 16rpx;
							height: 16rpx;
							background: #F6F7F9;
							position: absolute;
							left: 50%;
							box-shadow: 0 0 12rpx rgba(0, 0, 0, .12);
						}

						&::before {
							top: 0;
							transform: translate(-50%, -50%);
						}

						&::after {
							bottom: 0;
							transform: translate(-50%, 50%);
						}

						.line-inner {
							width: 100%;
							height: 100%;
							border: 1px dashed #FDBAAA;
						}
					}

					.radio-wrap {
						margin-left: auto;
					}


					.coupon-info {
						margin-left: 88rpx;

						.coupon-time {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.4);
							line-height: 40rpx;
							margin-top: 16rpx;
						}

						.coupon-name {
							height: 48rpx;
							font-size: 32rpx;
							color: #1D2129;
							font-weight: bold;
							line-height: 48rpx;
						}
					}

					.price-wrap {

						.coupon-desc {
							height: 32rpx;
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.4);
							line-height: 32rpx;
							margin-top: 8rpx;
						}

						.money-wrap {
							display: flex;
							flex-flow: row nowrap;
							align-items: flex-end;

							.prefix {
								font-size: 40rpx;
								font-weight: bold;
								color: #FC7655;
								padding-bottom: 8rpx;
							}

							.money-value {
								font-size: 72rpx;
								color: #FC7655;
								font-weight: bold;
							}
						}
					}

					.coupon-btn {
						width: 160rpx;
						height: 56rpx;
						background: linear-gradient(125deg, #FC7655 0%, #FFAC5E 100%);
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						display: flex;
						flex-flow: row nowrap;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						color: #FFFFFF;
						margin-left: auto;

						&.active {
							background: #ccc;
						}
					}
				}
			}

			.popup-header {
				display: flex;
				justify-content: center;
				position: relative;
				align-items: center;
				height: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.9);
				line-height: 48rpx;
				padding: 0 64rpx;
				margin-bottom: 24rpx;

				.close-icon {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 64rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>